import Taro from "@tarojs/taro";
import { memo, useEffect, useState } from "react";
import { ScrollView, Text, View, Image, Input, Textarea } from "@tarojs/components";
import { Popup, Button, Overlay, Picker } from "@nutui/nutui-react-taro";

import useNavInfo from "../../../../hooks/useNavInfo";
import { selectMiniTranUsers } from "../../../../api/apply";
import dayjs from "dayjs";
import "./index.scss";

const EditModal = (props) => {
  const { visible, close, submit, auditType,trainingTime,onChangeTime } = props

  const { screenHeight, screenWidth } = useNavInfo();
  const [isVisible2, setIsVisible2] = useState(false)
  const [useList, setUserList] = useState([])
  const [leturerName, setLeturerName] = useState("")
  const [leturer, setLeturer] = useState("")
  // const [trainingTime, setTrainingTime] = useState('')
  const [timeList, setTimeList] = useState([])
  const [auditReason, setAuditReason] = useState([])

  useEffect(() => {
    getUserList("")
    getGennerDate()
  }, [])

  const getGennerDate = () => {
    const today = dayjs();
    let dates = [];
    for (let i = 1; i <= 30; i++) {
      const date = today.add(i - 1, 'day').format('MM-DD'); // i + 1 因为起始点是后两天
      dates.push({ text: date, value: date });
    }
    setTimeList([dates, [
      { text: "09:00", value: "09:00" },
      { text: "10:00", value: "10:00" },
      { text: "11:00", value: "11:00" },
      { text: "15:00", value: "15:00" },
      { text: "16:00", value: "16:00" },
      { text: "17:00", value: "17:00" }
    ]])
  }


  const getUserList = async (userName) => {
    const { success, data } = await selectMiniTranUsers({ userName: userName })
    if (success) {
      setUserList(data)
    }
  }

  const getSelectUser = (item) => {
    // setLeturerName(item.userName + ' ' + item.mobile)
    setLeturerName(item.userName)
    setLeturer(item.id)
    // setUserList([])
  }

  const submitFn = () => {
    if (auditType === 2) {
      if (!leturer) {
        Taro.showToast({
          title: '请搜索选择主讲人',
          icon: 'none'
        })
        return;
      }
    }

    if (auditType === 3) {
      if (!auditReason) {
        Taro.showToast({
          title: '请填写备注',
          icon: 'none'
        })
        return;
      }
    }
    submit(leturerName, leturer)
    setLeturerName("")
  }

  const changePicker = (list, option, columnIndex) => {
    console.log(columnIndex, option)
  }

  return (
    <View>
      {
        visible &&
        <View className="modalWrap" style={{ width: screenWidth, height: screenHeight }}>
          <View className="contentWrap">
            <View className="header">
              <View onClick={close}>
                <Text>取消</Text>
              </View>
              <Text>{auditType === 2 ? '同意申请' : '拒绝申请'}</Text>
              <Button type="info" onClick={submitFn}>
                提交
              </Button>
            </View>
            <View className="dalMian">

              {/* {
                auditType == 3 &&
                <View className="overInfoItem1">
                  <Text className="overItemLabel">拒绝原因</Text>
                  <Textarea className="mutInp" value={auditReason} onInput={(e) => {
                    setAuditReason(e.detail.value)
                  }} placeholder="请输入" />
                </View>
              } */}

              {
                auditType == 2 &&
                <>
                  {/* <View className="overInfoItem" onClick={() => { setIsVisible2(true) }}>
                    <Text className="overItemLabel">培训时间</Text>
                    <Text className="overItemValue" style={{ color: '#333' }}>{trainingTime?.substr(0, 16) || '选择时间'}</Text>
                  </View> */}
                  <View className="overInfoItem">
                    <Text className="overItemLabel">培训主讲人</Text>
                    <Input className="inpValue" value={leturerName} onChange={(e) => {
                      setLeturerName(e.detail.value)
                      getUserList(e.detail.value)
                    }} placeholder="搜索选择培训主讲人" />
                  </View>

                  <ScrollView className="leturerWrap" scrollY>
                    {
                      useList.map((v, i) => {
                        return (
                          <View className="useItem" onClick={() => getSelectUser(v)}>
                            <Text>{v.userName}</Text>
                            <Text style={{flex:1}}>{v.mobile}</Text>
                            {
                              leturer == v.id && <Text style={{color:'#2A64F4',marginRight:24}}>✔</Text>
                            }
                          </View>
                        )
                      })
                    }

                    {
                      useList.length === 0 &&
                      <View style={{display:'flex',justifyContent:"center",paddingTop:24}}>
                        <Text style={{color:'#666'}}>暂无主讲人</Text>
                      </View>
                    }

                  </ScrollView>
                </>
              }
            </View>

          </View>
        </View>
      }

      <Picker
        title="选择培训时间"
        visible={isVisible2}
        options={timeList}
        onClose={() => setIsVisible2(false)}
        onChange={changePicker}
        onConfirm={(options, values) => {
          onChangeTime(values[0] + ' ' + values[1])
          // setTrainingTime(values[0] + ' ' + values[1])
        }}
      />
    </View>

  );
}

export default EditModal;
